<template>
  <div class="video-new">
    <!-- 头部导航栏 -->
    <van-nav-bar class="tab" title="视频" @click-left="$router.back()" fixed color="#fff" >
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #right>
        <van-icon name="share-o" color="#fff" size="20" />
      </template>
    </van-nav-bar>

    <!-- 视频内容 -->
    <VideoCom
      :slideData="slideData"
      :height="500"
      :begin="0"
      :interval="3000"
      :dot="true"
      :arrow="true"
    >
    </VideoCom>

    <!-- 点赞部分 -->
    <div class="give">
      <!-- 爱心 -->
      <div class="star">
        <label class="container" for="checkbox">
          <input type="checkbox" id="checkbox" hidden />

          <svg
            t="1639040689615"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2330"
          >
            <path
              d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z"
              p-id="2331"
              id="heart"
            ></path>
          </svg>

          <span></span>
        </label>
      </div>
      <!-- 评论 -->
      <div class="commen">
        <van-icon name="chat-o" size="30" color="#fff" />
      </div>
      <!-- 转发 -->
      <div class="transmit">
        <van-icon name="share-o" size="30" color="#fff" @click="isShowShare" />
      </div>
      <!-- z转发弹框 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
  </div>
</template>





<script>
import VideoCom from './components/VideoCom.vue';
 export default {
  data() {
    return {
      // 视频数据
      slideData: [
        {
          title: "这是一个Vue轮播图组件的第一张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/7S18LHT689FRNZL4_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第二张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/FEYW1G2A8B8FRO22_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第三张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/04713YW0EGMYBS73_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第四张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/JAKIS16S4E4XTMWL_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第5张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/BH1EJ524R5V1TVTB_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第6张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/O0CNXNJ0PXA04HET_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第7张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/TTG1K6DH740CML83_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第7张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/IP0D6NYKYQ2Z739M_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第8张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/TUC5TVTE3RP3ZN6Q_hd.mp4",
            },
          ],
        },
        {
          title: "这是一个Vue轮播图组件的第9张视频",
          url: "#",
          videos: [
            {
              video: "https://qiubai-video.yitxf.net/A01258MW08VZMR57_hd.mp4",
            },
          ],
        },
      ],

      // 分享弹窗控制
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    isShowShare() {
      this.showShare = true;
    },
    // goSelect(option) {
    //   console.log(123, option.name);
    //   if (option.name == "朋友圈") {
    //     // this.$router.push("/circle");
    //   }
    // },
  },
     components:{
       VideoCom
     }
 }
     
 
    

</script>



<style lang="less" >
     .video-new {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  padding-top: 46px;
  background: black;

  // 头部tab 部分
  .tab {
    background: rgba(243, 237, 237, 0.1);
    .van-nav-bar__title {
      color: #fff;
    }
  }

  // 视频部分
  .give {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    right: 0px;
    top: 350px;
    width: 50px;
    height: 150px;
    background: rgba(242, 240, 240, 0.1);
    z-index: 99999;
  }
  .star {
    .container {
      /* 鼠标移入,光标变小手 */
      cursor: pointer;
      /* 自定义属性,可通过var函数对其调用 */
      --c: #ff6b81;
    }
    svg {
      width: 30px;
      /* 溢出可见 */
      overflow: visible;
      /* 相对定位 */
      position: relative;
      z-index: 10;
    }
    #heart {
      fill: #eee;
      /* stroke属性,可应用于任何种类的线条,文字和元素,就像一个圆的轮廓 */
      stroke: var(--c);
      /* 线条宽度 */
      stroke-width: 40px;
      /* 设置线条为虚线,虚线的长度 */
      stroke-dasharray: 2600;
      /* 虚线的位移 */
      stroke-dashoffset: 2600;
      /* 端点为圆头 */
      stroke-linecap: round;
    }
    span {
      display: block;
      width: 12px;
      height: 12px;
      background-color: transparent;
      border-radius: 50%;
      /* 绝对定位 居中 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      /* 设置各个方向的阴影 */
      box-shadow: 0 -24px 0 var(--c), 0 24px 0 var(--c), -24px 0 0 var(--c),
        24px 0 0 var(--c), -18px -18px 0 var(--c), 18px -18px 0 var(--c),
        18px 18px 0 var(--c), -18px 18px 0 var(--c);
    }
    #checkbox:checked + svg #heart {
      /* 执行动画：动画名 时长 线性的 停留在最后一帧 */
      animation: drawHeart 1s linear forwards;
    }
    #checkbox:checked ~ span {
      /* 执行动画：动画名 时长 加速后减速 停留在最后一帧 */
      animation: blink 0.5s ease-in-out forwards;
      /* 动画延迟时间 */
      animation-delay: 0.85s;
    }
    #checkbox:checked + svg {
      /* 执行动画：动画名 时长 线性的 停留在最后一帧 */
      animation: beat 1s linear forwards;
    }

    /* 定义动画 */
    /* 画心的动画 */
    @keyframes drawHeart {
      0% {
        stroke: var(--c);
        stroke-dashoffset: 2600;
      }
      80% {
        stroke: var(--c);
        stroke-dashoffset: 0;
        fill: #eee;
      }
      100% {
        stroke: var(--c);
        stroke-dashoffset: 0;
        fill: var(--c);
      }
    }
    /* 小圆点闪出的动画 */
    // @keyframes blink {
    //     0%{
    //         transform: translate(-50%,-50%) scale(0.5);
    //         opacity: 0.8;
    //     }
    //     50%{
    //         transform: translate(-50%,-50%) scale(1);
    //         opacity: 1;
    //     }
    //     100%{
    //         transform: translate(-50%,-50%) scale(1.1);
    //         opacity: 0;
    //     }
    // }
    /* 心跳动的动画 */
    @keyframes beat {
      0% {
        transform: scale(1);
      }
      70% {
        transform: scale(1);
      }
      80% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  }
  .commen {
  }
}

</style>